<template>
<view class="page"> 
	<template>
		<view class="body"> 		
			<view class="pic-list">
				<swiper class="swiper" circular :indicator-dots="swiperOption.indicatorDots" :autoplay="swiperOption.autoplay" :interval="swiperOption.interval" :duration="swiperOption.duration">
					<swiper-item v-for="(item,index) in detail.files" :key="index">
						<view class="item"><image :src="item" mode="widthFix"></image></view>
					</swiper-item> 
				</swiper>
			</view>
			<view class="title-wrapp m-b2">  
				<view class="m-b1 f-s28">{{detail.question}}</view>
				<view class="f-grey f-s24">#{{detail.square}} {{detail.weather}}</view>
			</view>
			<!-- <view class="mod-wrap m-b4">
				<view class="hd-title">识别结果</view>
				<view class="con">
					<view class="result-list">
						<scroll-view scroll-x="true" class="scroll-x">
							<navigator url="/pages/result-detail/result-detail" hover-class="none" class="item m-r2" v-for="(item,index) in 3" :key="index">
								<view class="title">病毒病叶</view>
								<view class="info">
									<view class="pic"><image src="@/static/images/pai_example.jpg" mode="widthFix"></image></view>
									<view class="val">
										<view class="split-line">病毒病叶病毒病叶病毒病叶病毒病叶病毒病叶病毒病叶病毒病叶病毒病叶病毒病叶</view>
										<view>详情 ></view>
									</view>
								</view>
							</navigator>
						</scroll-view>
					</view>
				</view>
			</view> -->
			<view v-if="answerlist1.length>0" class="mod-wrap">
				<view class="hd-title">专家回答</view>
				<view class="con">
					<view class="list-wrap">
						<navigator :url="'/pages/reply/reply?ask_id='+this.id+'&id='+item.id" hover-class="none" class="item m-b2" v-for="(item,index) in answerlist1" :key="index">
							<view class="tp m-b1">
								<view class="avator">
									<image v-if="item.avatar" :src="item.avatar" mode="widthFix"></image>
									<image v-else src="@/static/images/avator.png" mode="widthFix"></image>
								</view>
								<view class="user">
									<view class="f-s28">{{item.nickname}}</view>
									<view class="f-s24 f-grey">{{item.expert}}</view>
								</view>
							</view>
							<view class="content m-b2">{{item.answer}}</view>
							<view class="ft"><text class="label">{{item.comments}}条回复</text><text>{{item.create_time}}</text></view>
						</navigator> 
					</view>
				</view>
			</view>
			
			<view v-if="answerlist2.length>0" class="mod-wrap">
				<view class="hd-title">用户回答</view>
				<view class="con">
					<view class="list-wrap">
						<navigator :url="'/pages/reply/reply?ask_id='+this.id+'&id='+item.id" hover-class="none" class="item m-b2" v-for="(item,index) in answerlist2" :key="index">
							<view class="tp m-b1">
								<view class="avator">
									<image v-if="item.avatar" :src="item.avatar" mode="widthFix"></image>
									<image v-else src="@/static/images/avator.png" mode="widthFix"></image>
								</view>
								<view class="user">
									<view class="f-s28">{{item.nickname}}</view>
									<view class="f-s24 f-grey">{{item.expert}}</view>
								</view>
							</view>
							<view class="content m-b2">{{item.answer}}</view>
							<view class="ft"><text class="label">{{item.comments}}条回复</text><text>{{item.create_time}}</text></view>
						</navigator> 
					</view>
					 
				</view>
			</view>
		</view>
		
		<view class="footer" :style="{'height':d_height+'px'}">
			<view class="fix-wrap detail-footer" :style="{'height':d_height+'px'}">
				<textarea v-model="answer" placeholder="我来写回答" auto-height @keyboardheightchange="keyboardheightchange"></textarea> 
				<view class="send-btn" @click="send">发布</view>
			</view>
		</view> 
	</template>
</view>
</template>

<script>
import { htmlParse } from '@/common/util.js' 

export default{
	name:'list',
	data(){
		return {
			type:'1',
			isIphoneX:false,
			id:'',  
			detail:{}, 
			htmlContent:[],
			label:[],
			answerlist1:[],
			answerlist2:[],
			loadingState:{
				default:false,
				loading:true
			}, 
			d_height:90,
			userInfo:uni.getStorageSync('userInfo'), 
			swiperOption:{
				indicatorDots: true,
				autoplay: true,
				interval: 2000,
				duration: 500
			},
			answer:''
		}
	},
	async onLoad(params) {  
		this.id=params.id; 
		this.askdetail();
		this.answerindex(1);
		this.answerindex(2);
	},
	mounted() {
		 
	},
	onReachBottom(){
		 	 
	},
	methods:{
		
		askdetail:async function(){
		 	let res=await this.$api.user_api.askdetail({				 
		 		ask_id: this.id 
		 	})  
		 	   
		 	if(res.data.code==0){
		 		res.data.data.files=res.data.data.photos.split(',');
				if(res.data.data.use_chem==2){
					res.data.data.question+=`，近期没有用肥用料，发生面积是${res.data.data.square}`
				}else{
					res.data.data.question+=`，近期使用了${res.data.data.chem_name}，发生面积是${res.data.data.square}`
				}
				this.detail=res.data.data;
		 	}   
		},
		
		answerindex:async function(type){
		 	let res=await this.$api.user_api.answerindex({				 
		 		ask_id: this.id,
				type:type
		 	})  
		 	   
		 	if(res.data.code==0){ 
				if(type==1){
					this.answerlist1=res.data.data; 
				}
				if(type==2){
					this.answerlist2=res.data.data; 
				}
				
		 	}   
		},
		 
		async send(){
			let res=await this.$api.user_api.answerissue({
				ask_id:this.id,
				answer: this.answer
			}) 
			console.log(res)
			if(res.data.code==0){
				uni.showToast({
					mask:true,
					title:'发布成功'
				})
				this.answer='';
				this.$store.commit('answer_update',1);
			}
		}, 
		 
	},
	components:{  
	 
	},
	computed:{
		list_update(){  
			return this.$store.state.answer
		},
		comment_update(){
			return this.$store.state.comment
		}
	},
	watch:{
		list_update(newer,older){ 
			if(newer!=older){
				this.answerlist1=[];
				this.answerlist2=[];
				this.answerindex(1);
				this.answerindex(2);
			}
		},
		comment_update(newer,older){
			if(newer!=older){
				this.answerlist1=[];
				this.answerlist2=[];
				this.answerindex(1);
				this.answerindex(2);
			}
		}
	},
}
</script>

<style lang="less" scoped>
	.title-wrapp{
		padding: 20rpx;
		background: #333;
		color: #fff;
	}
	.mod-wrap{
		.hd-title{
			padding: 20rpx 30rpx;
			font-size: 30rpx;
			font-weight: bold;
		}
	}
	.pic-list{
		.swiper{
			height: 400rpx;
		}
		image{
			width: 100%;
		}
	}
	.result-list{
		padding-left: 30rpx; 
		.scroll-x{ 
			white-space: nowrap;
		}
		.item{
			display: inline-block;
			width: 500rpx;
			padding: 30rpx;
			background: #fff;
			border-radius: 10rpx;
			.title{
				margin-bottom: 20rpx;
				font-size: 32rpx;
				font-weight: bold;
			}
			.info{
				display: flex;
				flex-grow: 2;
				.pic{
					width: 150rpx;
					height: 150rpx;
					flex-shrink: 0;
					margin-right: 20rpx;
					image{
						border-radius: 15rpx;
					}
				}
			}
			.val{
				flex-grow: 2;
				max-width: 65%;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				font-size: 28rpx;
				color: #666;
			}
		}
	}
	.list-wrap{
		padding: 0 30rpx;
		.item{
			padding: 30rpx;
			background: #fff;
			border-radius: 15rpx;
			.tp{
				display: flex;
				.avator{
					width: 90rpx;
					height: 90rpx;
					margin-right: 20rpx;
				}
			}
			.content{
				padding: 10rpx 0;
				font-size: 28rpx;
				color: #333;
			}
			.ft{
				color: #999;
				font-size: 26rpx;
				.label{
					padding: 10rpx 20rpx;
					margin-right: 20rpx;
					background: #f5f5f5;
					border-radius: 38rpx;
					color: #333; 
				}
			}
		}
	}
	.footer{
		min-height:100rpx;
	}
	.footer .fix-wrap{
		left: 0;
		bottom:0;
		width:100%;
		min-height:148rpx;
		border-top:2rpx solid #eee;
		background: #fff;
	}
	.detail-footer{ 
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 100rpx;
		background: #f00; 
		textarea{
			width: 75%;			 
			border: 2rpx solid #eee;
			background: #f5f5f5;
			border-radius: 38rpx;   
			margin:20rpx auto;
			padding:5rpx 2%;			
			color:#333;
			font-size: 28rpx;
		}
		.send-btn{
			height:80rpx;
			line-height: 80rpx;
			padding: 0 20rpx;
			margin-right: 20rpx;
			background: #00aa7f;
			border-radius: 5rpx;
			color: #fff;
			font-size: 28rpx;
		} 
	} 
</style>
